﻿
<style>
	#selectCustom input {
		margin-right: .2rem;
	}
</style>
<div class="bui-page">
	<header class="bui-bar">
		<div class="bui-bar-left">
			<a class="bui-btn" onclick="bui.back();"><i class="icon-back"></i></a>
		</div>
		<div class="bui-bar-main">选择列表</div>
		<div class="bui-bar-right">
		</div>
	</header>
	<main>
		<div class="section-title">动态绑定</div>
		<div id="selectCustom"></div>
		<div class="container-y">
			<div class="bui-box-space">
				<div class="span1"><div id="selectAll" class="bui-btn">全选</div></div>
				<div class="span1"><div id="selectNone" class="bui-btn">重置</div></div>
				<div class="span1"><div id="unselect" class="bui-btn">反选</div></div>
				<div class="span1"><div id="queding" class="bui-btn primary">确定</div></div>
			</div>
		</div>

		<div class="section-title">静态结构自由绑定</div>
		<div id="selectCustom2" class="bui-list">
			<div class="bui-btn-title">南方</div>
			<div class="bui-btn bui-btn-line bui-box">
			<div class="span1">广东</div>
			<input id="check-1" type="checkbox" class="bui-choose" value="11" text="广东" checked="checked">
			</div>
			<div class="bui-btn bui-btn-line bui-box">
			<div class="span1">广西</div>
			<input id="check-2" type="checkbox" class="bui-choose" value="22" text="广西">
			</div>
			<div class="bui-btn-title">北方</div>
			<div class="bui-btn bui-btn-line bui-box">
			<div class="span1">北京</div>
			<input id="check-3" type="checkbox" class="bui-choose" value="33" text="北京">
			</div>
			<div class="bui-btn bui-btn-line bui-box">
			<div class="span1">南京</div>
			<input id="check-4" type="checkbox" class="bui-choose" value="44" text="南京">
			</div>
	    </div>
		<div class="container-y">
			<div class="bui-box-space">
				<div class="span1"><div id="selectAll2" class="bui-btn">全选</div></div>
				<div class="span1"><div id="selectNone2" class="bui-btn">重置</div></div>
				<div class="span1"><div id="unselect2" class="bui-btn">反选</div></div>
				<div class="span1"><div id="queding2" class="bui-btn primary">确定</div></div>
			</div>
		</div>

	</main>
</div>
